<template>
  <view @touchmove.stop.prevent>
    <view class="tui-actionsheet" :class="{ 'tui-actionsheet-show': show, 'tui-actionsheet-radius': radius }">
      <view class="tui-actionsheet-tips" :style="{ fontSize: size + 'rpx', color: color }" v-if="tips">
        <text> {{ tips.length > 9 ? tips.substring(3, tips.length) : tips }}</text>
        <input
          v-if="itemList && itemList.length > 19"
          confirm-type="search"
          v-model="filterTemp"
          placeholder="输入关键字以筛选"
          placeholder-class="placeholder"
          @blur="filter = filterTemp"
        />
        <view class="check-all" v-show="choose" @click="checkAll">全选</view>
      </view>
      <view :class="[isCancel ? 'tui-operate-box' : '']">
        <scroll-view scroll-y class="scroll" v-if="show" :scroll-top="scrollTop">
          <view v-for="(item, index) in itemList" :key="index" :id="'s' + index">
            <view v-if="!filter || item.name.indexOf(filter) > -1">
              <view
                class="tui-actionsheet-btn tui-actionsheet-divider"
                :class="{ 'tui-btn-last': !isCancel && index == itemList.length - 1 }"
                hover-class="tui-actionsheet-hover"
                :hover-stay-time="150"
                :data-index="index"
                :style="{
                  color:
                    (choose && chooses.indexOf(index) > -1) || (!choose && parseInt(selectedIndex) == index)
                      ? '#0873B7'
                      : item.color || '',
                }"
                @tap="handleClickItem"
                >{{ item.name }}</view
              >
            </view>
          </view>
        </scroll-view>
      </view>
      <view style="display: flex; border-top: 12rpx solid rgba(0, 0, 0, 0.1)">
        <view
          class="tui-actionsheet-btn tui-actionsheet-clear"
          hover-class="tui-actionsheet-hover"
          :hover-stay-time="150"
          @tap="handleClickClear"
          >清除</view
        >
        <view
          class="tui-actionsheet-btn tui-actionsheet-cancel"
          hover-class="tui-actionsheet-hover"
          :hover-stay-time="150"
          v-if="isCancel"
          @tap="handleClickCancel"
          >取消</view
        >
        <view
          class="tui-actionsheet-btn tui-actionsheet-submit"
          hover-class="tui-actionsheet-hover"
          :hover-stay-time="150"
          v-if="choose"
          @tap="handleClickChoose"
          >确定({{ chooses.length }})</view
        >
      </view>
      <view :style="{ height: bottomSafe ? `env(safe-area-inset-bottom)` : '' }" />
    </view>
    <view class="tui-actionsheet-mask" :class="{ 'tui-mask-show': show }" @tap="handleClickMask"></view>
  </view>
</template>

<script>
export default {
  name: "tuiActionsheet",
  props: {
    bottomSafe: {
      type: Boolean,
      default: true,
    },
    showFilter: {
      type: Boolean,
      default: false,
    },
    selectedIndex: {
      type: String,
      default: -1,
    },
    //点击遮罩 是否可关闭
    maskClosable: {
      type: Boolean,
      default: true,
    },
    //显示操作菜单
    show: {
      type: Boolean,
      default: false,
    },
    //菜单按钮数组，自定义文本颜色，红色参考色：#e53a37
    itemList: {
      type: Array,
      default: function () {
        return [
          {
            text: "确定",
            color: "#2B2B2B",
          },
        ];
      },
    },
    //提示文字
    tips: {
      type: String,
      default: "",
    },
    //提示文字颜色
    color: {
      type: String,
      default: "#808080",
    },
    //提示文字大小 rpx
    size: {
      type: Number,
      default: 26,
    },
    //是否需要圆角
    radius: {
      type: Boolean,
      default: true,
    },
    //是否需要取消按钮
    isCancel: {
      type: Boolean,
      default: true,
    },
    //是否多选
    choose: {
      type: Boolean,
      default: false,
    },
    chooseList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    show(val, oldVal) {
      uni.hideKeyboard();
      // this.chooses = JSON.parse(JSON.stringify(this.chooseList));
      if (val) {
        this.filter = "";
        this.filterTemp = "";
        if (this.chooseList) {
          this.chooses = JSON.parse(JSON.stringify(this.chooseList));
        } else {
          this.chooses = [];
        }
        this.scrollTop = -1;
        setTimeout(() => {
          let scrollTop = 0;
          if (this.choose) {
            if (this.chooses.length) {
              scrollTop = this.chooses[0] * 100 - 50;
            }
          } else {
            scrollTop = this.selectedIndex * 100 - 50;
          }
          this.scrollTop = uni.upx2px(scrollTop);
        }, 500);
      }
    },
  },
  data() {
    return {
      scrollTop: 0,
      chooses: [],
      filter: "",
      filterTemp: "",
    };
  },
  methods: {
    handleClickMask() {
      if (!this.maskClosable) return;
      this.handleClickCancel();
    },
    handleClickItem(e) {
      if (!this.show) return;
      const dataset = e.currentTarget.dataset;
      if (this.choose) {
        if (this.chooses.indexOf(dataset.index) > -1) {
          this.chooses.splice(this.chooses.indexOf(dataset.index), 1);
        } else {
          this.chooses.push(dataset.index);
        }
      } else {
        this.$emit("click", {
          index: dataset.index,
        });
      }
    },
    checkAll() {
      this.chooses = [];
      this.itemList.forEach((item, index) => {
        if (!this.filter || item.name.indexOf(this.filter) > -1) {
          this.chooses.push(index);
        }
      });
    },
    handleClickChoose() {
      this.$emit("click", {
        chooseList: this.chooses,
      });
    },
    handleClickCancel() {
      this.$emit("cancel");
    },
    handleClickClear() {
      if (this.choose) {
        this.chooses = [];
      } else {
        this.$emit("click", {
          index: "",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.tui-actionsheet {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.25s ease-in-out;
  border-top: 1rpx solid rgba(0, 0, 0, 0.2);
  /* background-color: #F7F7F7; */
  // background-color: rgba(42,42,42,0.8);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  min-height: 100rpx;
}
.scroll {
  max-height: 60vh;
  // mask: linear-gradient(transparent, black 80rpx, black calc(100% - 80rpx), transparent 100%);
}
.tui-actionsheet-radius {
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
}

.tui-actionsheet-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.tui-actionsheet-tips {
  width: 100%;
  padding: 40rpx;
  box-sizing: border-box;
  text-align: center;
  /* background-color: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  position: relative;
  input {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: $default-border-radius;
    margin: 0 40rpx;
  }
  .check-all {
    position: absolute;
    right: 40rpx;
    padding: 4rpx 10rpx;
    border: 1rpx solid #1dbc9a;
    color: #1dbc9a;
    border-radius: 6rpx;
  }
}

.tui-operate-box {
  /* padding-bottom: 12rpx; */
}

.tui-actionsheet-btn {
  width: 100%;
  height: 100rpx;
  /* background-color: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 34rpx;
  position: relative;
}

.tui-btn-last {
  // padding-bottom: env(safe-area-inset-bottom);
}

.tui-actionsheet-divider::before {
  content: "";
  width: 100%;
  border-top: 1rpx solid rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.tui-actionsheet-clear {
  color: #959595;
  // padding-bottom: env(safe-area-inset-bottom);
}
.tui-actionsheet-cancel {
  color: #e83112;
  // padding-bottom: env(safe-area-inset-bottom);
}
.tui-actionsheet-submit {
  color: #0873b7;
  // padding-bottom: env(safe-area-inset-bottom);
}

.tui-actionsheet-hover {
  opacity: $default-disabled-opacity !important;
  /* background-color: #f7f7f9; */
  // background-color: rgba(0, 0, 0, 0.1);
}

.tui-actionsheet-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-color: rgba(0, 0, 0, 0); */
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
  z-index: 9996;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.tui-mask-show {
  opacity: 1;
  visibility: visible;
}
</style>
